<template>
    <view class="edit-view">
        <Tags ref="tagsRef" :label="tagsLabel" />
        <u-row justify="center" class="top-button">
            <u-row justify="space-between" style="width: 90%">
                <u-icon name="close" @click="hidePopup" size="40"></u-icon>
                <u-icon name="checkbox-mark" size="40"></u-icon>
            </u-row>
        </u-row>
        <u-row justify="center" class="content-wrap">
            <u-row justify="center" class="title">
                <text>今天过得怎么样？</text>
            </u-row>
            <u-row class="content">
                <u-row justicy="center" class="item">
                    <u-row justify="center" class="row-width">
                        <text class="label" style="text-align: center">
                            {{ moodText }}
                        </text>
                    </u-row>
                    <u-row justify="center" class="row-width" style="height: 120rpx">
                        <image
                            style="width: 60rpx; height: 60rpx; margin: 0rpx 10rpx"
                            v-for="({ icon }, k) in moodIcons"
                            :key="k"
                            :src="`/static/png/${icon}.png`"
                            @click.native="clickMoodIcon($event, k)"
                        />
                    </u-row>
                </u-row>
                <u-row justify="center" class="item">
                    <u-row justify="between" v-for="({ label, icon }, k) in pannels" :key="k" class="pannel">
                        <text>{{ label }}</text>
                        <u-icon :name="icon" size="50" @click="addTags(label)"></u-icon>
                    </u-row>
                    <u-row justify="end" class="row-width">
                        <u-icon name="edit-pen-fill" size="30" style="margin-right: 10rpx" />
                        <text>编辑标签</text>
                    </u-row>
                </u-row>
                <u-row justify="center" class="item pannel">
                    <u-input
                        v-model="notes"
                        type="textarea"
                        :border="true"
                        height="100"
                        :auto-height="true"
                        style="background: white"
                        placeholder="备注"
                    />
                </u-row>
            </u-row>
        </u-row>
    </view>
</template>
<script>
    import { moodIcons } from './data'
    import Tags from './tags'
    export default {
        name: 'EditMood',
        components: {
            Tags,
        },
        props: {
            showPopup: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                notes: '',
                pannels: [
                    {
                        label: '情绪',
                        icon: 'plus-circle',
                    },
                ],
                moodIcons: moodIcons,
                tagsLabel: '',
                lastMoodIcon: null,
                moodIndex: null,
            }
        },
        computed: {
            moodText() {
                const { moodIndex, moodIcons } = this
                // const text = '整体的心情色彩'
                return moodIndex !== null ? `${moodIcons[moodIndex].label}` : ''
            },
        },
        methods: {
            hidePopup() {
                this.$emit('hidePopup')
            },
            addTags(label) {
                this.tagsLabel = label
                this.$refs.tagsRef.setShowPopup(true)
            },
            clickMoodIcon(e, k) {
                this.moodIndex = k
                const { lastMoodIcon } = this
                if (lastMoodIcon) {
                    lastMoodIcon.style.width = '30px'
                    lastMoodIcon.style.height = '30px'
                }
                const el = e.path[1]
                el.style.width = '50px'
                el.style.height = '50px'
                this.lastMoodIcon = el
            },
        },
    }
</script>
<style lang="scss">
    .edit-view {
        width: 100%;
        height: 100%;
        letter-spacing: 4rpx;
        overflow: hidden;
        .top-button {
            width: 100%;
            margin: 30rpx 0rpx;
        }
        .content-wrap {
            width: 100%;
            height: 100%;
            .title {
                width: 100%;
                font-size: 36rpx;
                font-weight: bolder;
            }
            .content {
                width: 90%;
                .row-width {
                    width: 100%;
                }
                .item {
                    width: 100%;
                    margin-bottom: 50rpx;
                }
                .label {
                    width: 100%;
                    font-size: 30rpx;
                    margin-bottom: 20rpx;
                }
                .pannel {
                    width: 100%;
                    background: #f1f1f1;
                    border-radius: 30rpx;
                    padding: 30rpx;
                    font-size: 30rpx;
                    margin-bottom: 20rpx;
                }
            }
        }
    }
</style>
